<%@page import="com.crm.user.model.UserAccount"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 		<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>诺德CRM系统</title>
        <%@ include file="/WEB-INF/page/public/meta.jsp"%>
	</head>
	<body>
		<object type="application/x-shockwave-flash" data="/im/CIMBridge.swf?ds=33333" id="CIMBridge"  width="0px" height="0px"> 
				<param name="quality" value="low"/>
				<param name="allowScriptAccess" value="always"/>
				<param name="wmode" value="transparent"/>
				<param name="movie" value="/im/CIMBridge.swf?ds=33333"/>
		</object>
		<div class="layui-layout layui-layout-admin">
		<!-- header-->
		<%
		UserAccount  user = (UserAccount)request.getSession().getAttribute("user");
		request.setAttribute("user", user);
		%>
 
			<div class="layui-header header header-demo">
				<div class="layui-main">
					<div class="admin-login-box">
						<a class="logo" style="left: 0;" href="#">
							<i class="TM-icon icon-topicCRM"></i>
							<span style="font-size: 20px;">诺德CRM系统</span>
						</a>
					</div>
					<div class="notice-box clefix  notice_active">
						 <i class="TM-icon icon-horn"></i>
						<ul  id="notice"><li  class="notice_active_ch">暂无公告信息</li></ul> 
					</div>
					<ul class="layui-nav admin-header-item">
					   <!--  <li class="layui-nav-item  announce-item">
							<a href="javascript:;"> <i class="TM-icon icon-announce" data-icon=""></i> 公告信息</a>
						</li>  -->
						<li class="layui-nav-item   bjlj">
							<a href="javascript:;"> <i class="TM-icon icon-quicklinks" data-icon=""></i> 便捷链接</a>
						</li>
						<li class="layui-nav-item  dbtx">
							<a href="javascript:;"> <i  class="TM-icon icon-agent" data-icon=""></i> 我的预约</a>
						</li>
						<!-- <li class="layui-nav-item"  >
							<a href="javascript:;"> <i class="TM-icon icon-mailist" data-icon=""></i> 通讯录</a>
						</li> -->
						<li class="layui-nav-item msgboxbtn"  >
							<a href="javascript:;"> <i class="TM-icon icon-crmmessage "  data-icon=""></i><span class="redDot"  style="display:none"></span> 我的消息</a>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;" class="admin-header-user admin-header-userimg" >
							     <c:if test="${user.info.photo!=null&&user.info.photo.length()>0}">
							     	<img src="${user.info.photo}"  id="tx"  />
							     </c:if>
							      <c:if test="${user.info.photo==null||user.info.photo.length()<1}">
							     	<img src="images/0.jpg"  id="tx"  />
							     </c:if>
							
								<span>欢迎${user.info.name}</span>
							</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="javascript:;" id="uinfoPop"><i class="iconfont icon-mine"   style="font-size:16px" aria-hidden="true"></i> 我的信息</a>
								</dd>
								<dd>
									<a href="javascript:;" id="changepwd"><i class="iconfont icon-msnui-pw"  aria-hidden="true"></i> 更改密码</a>
								</dd>
								<!-- <dd id="lock">
									<a href="javascript:;">
										<i class="fa fa-lock" aria-hidden="true" style="padding-right: 3px;padding-left: 1px;"></i> 锁屏 (Alt+L)
									</a>
								</dd> -->
								<dd>
									<a  href="javascript:;"  id="aboutme" ><i  class="iconfont icon-prompt"  style="font-size:16px" aria-hidden="true"></i> 关于我们</a>
								</dd>
								<dd>
									<a  href="/upload/help.pdf"  target="_blank" ><i  class="iconfont icon-feedback"   style="font-size:16px" aria-hidden="true"></i> 帮助中心</a>
								</dd>
								<dd>
									<a href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> 退出</a>
								</dd>
							</dl>
						</li>
					</ul>
					<ul class="layui-nav admin-header-item-mobile">
						<li class="layui-nav-item">
							<a href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a>
						</li>
					</ul>
				</div>
			</div>
<!-- side-->
			<div class="layui-side layui-bg-black" id="admin-side">
				<div class="layui-side-scroll" id="admin-navbar-side" lay-filter="side"></div>
			</div>
<!-- body-->
			<div class="layui-body" style="bottom: 0;border-left: solid 2px #51ace1;" id="admin-body">
				<div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab">
					<ul class="layui-tab-title">
						<li class="layui-this">
							<i class="fa fa-dashboard" aria-hidden="true"></i>
							<cite>首页</cite>
						</li>
					</ul>
					<div class="layui-tab-content" style="min-height: 150px; padding: 0px 0 0 0;">
						<div class="layui-tab-item layui-show">
							<iframe src="/user/main"></iframe>
						</div>
					</div>
				</div>
			</div>
<!-- footer-->
		<!-- 	<div class="layui-footer footer footer-demo" id="admin-footer">
				<div class="layui-main">
					<p>2017 &copy;
						 CopyRight
					</p>
				</div>
			</div> -->
			
			<div class="site-tree-mobile layui-hide">
				<i class="layui-icon">&#xe602;</i>
			</div>
			
			<!-- 修改密码弹窗 -->
			<div class="changepwd" style="display: none;">
				<form action="#" id="changepwdform" method="post">
					<div style="margin-top: 40px;">
						<div class="layui-form-item">
	                		<label class="layui-form-label">原密码 : </label>
	                		<div class="layui-input-block">
	                			<input type="password" name="oldpwd" id="oldpwd" autocomplete="off" class="layui-input" style="width: 80%;">
	                		</div>
	            		</div>
	            		<div class="layui-form-item">
	                		<label class="layui-form-label">新密码 : </label>
	                		<div class="layui-input-block">
	                			<input type="password" name="newpwd" id="newpwd" autocomplete="off" class="layui-input" style="width: 80%;">
	                		</div>
	            		</div>
	            		<div class="layui-form-item TM-save-item" style="text-align: center;">
	                		<button class="layui-btn save-btn pwdchange" type="button" lay-submit="pwdchange" lay-filter="pwdchange">修改</button>
	            		</div>
					</div>
				</form>
			</div>
			
			
			<!-- 版权信息 -->
			<div class="copyright" style="display: none;">
			 
					<div style="margin-top: 20px;">
						<div class="layui-form-item">
	                		    <img alt="" src="/images/zywlkj.png"  height="300px" width="300px">
	            		</div> 
						<div class="layui-form-item">
	                		    <blockquote class="layui-elem-quote">版权所属 CR</blockquote>  
	            		</div> 
	            		<div class="layui-form-item">
	                		       <blockquote class="layui-elem-quote">软件版本 :V2.4</blockquote>    
	            		</div> 
					</div>
			 
			</div>
			
			
			<div class="site-mobile-shade"></div>
			

			<!--锁屏模板 start-->
			<script type="text/template" id="lock-temp">
				<div class="admin-header-lock" id="lock-box">
					<div class="admin-header-lock-img">
  							<c:if test="${user.info.photo!=null&&user.info.photo.length()>0}">
							     <img src="${user.info.photo}"    />
							</c:if>
							<c:if test="${user.info.photo==null||user.info.photo.length()<1}">
							     <img src="images/0.jpg"     />
						    </c:if>
					</div>
					<div class="admin-header-lock-name" id="lockUserName">${user.info.name}</div>
					<input type="text" class="admin-header-lock-input" value="输入密码解锁.." name="lockPwd" id="lockPwd" />
					<button class="layui-btn layui-btn-small" id="unlock">解锁</button>
				</div>
			</script>
			<!--锁屏模板 end -->
		  <link rel="stylesheet" href="<%=basePath%>js/uploader/webuploader.css"> 
			<script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>
			<script type="text/javascript" src="/js/uploader/webuploader.min.js"></script>
			<script type="text/javascript" src="/plugins/layui/layui.js"></script>
			<script type="text/javascript" src="/js/validation/jquery.validate.min.js"></script>
			<script>
			var navs =${menu};
			</script>
			<!-- <script type="text/javascript" src="datas/nav1.js"></script> -->
			<script src="/js/index.js"></script>
			
			<script>
			
			$.ajax({
	 			type : "get",
	 			url : "/sys/message",
	 			async:false,
	 			dataType : "json",
	 			success : function(data){
	 				result = data;
	 				var template ='<li  class="notice_active_ch">{time}&nbsp;&nbsp;{msg}</li> ';
	 				if(result!=null&&result.length>0){
	 					 var html ="";
	 					 for(var i=0;i<result.length;i++){
	 						 html +=template.replace("{msg}",result[i].content).replace("{time}",result[i].createdate.substring(0,10));
	 					 }
	 					 $("#notice").html(html);
	 				}
	 			}
	 		}); 
	        
			
			function timer(opj){
				$(opj).find('ul').animate({
					marginTop : "-4.5rem"  
					},700,function(){  
					$(this).css({marginTop : "0.0rem"}).find("li:first").appendTo(this);  
				})  
			}
			$(function(){ 
				var num = $('.notice_active').find('li').length;
				if(num > 1){
				   var time=setInterval('timer(".notice_active")',4500);
					$('.gg_more a').mousemove(function(){
						clearInterval(time);
					}).mouseout(function(){
						time = setInterval('timer(".notice_active")',4500);
					}); 
				}
				
				/* $(".news_ck").click(function(){
					location.href = $(".notice_active .notice_active_ch").children(":input").val();
				}) */
			});
			
			
			var CIM_HOST="<%=request.getLocalAddr()%>";//修改为服务器的真实IP
			var CIM_PORT=23456;//修改为服务器的真实IP
			var ACCOUNT='${sessionScope.user.id}';
			
			
			
			
				layui.use(['layer','form'],function() {
					var $ = layui.jquery,
					layer = layui.layer;  
					
					$("#aboutme").on("click",function(){
						 layer.open({
							  type:1,
							  title:"关于我们",
							  closeBtn: 1, //不显示关闭按钮
							  anim: 2,
							  shadeClose: true, //开启遮罩关闭
							  content:$('.copyright') 
							});
						 
						/* 	layer.open({
								title: '修改密码',
								maxmin: true,
								type: 1,
								content: $(".changepwd"),
								area: ['20%', '40%']
							}); */
					})
					
					
					if(callcenterstate==1){
						//window.open("/sys/callcenter",'_blank'); 
					}
				
					
					/*  layer.open({
					      type: 2,
					      title: '轻客呼叫中心',
					      //offset:  't',
					      shadeClose: true,
					      shade: false,
					      closeBtn:0,
					      maxmin: true, //开启最大化最小化按钮
					     area: ['480px','595px'],
					      content: '/sys/callcenter'
					    }); */
					
					var uploader = new WebUploader.Uploader({
					    swf: '/js/uploader/Uploader.swf',
					    auto:true,
					    pick:{id:".admin-header-userimg"},
					    accept: {
				            extensions: 'gif,jpg,jpeg,bmp,png',
				            mimeTypes: 'image/*'
				        },
					    server: '/user/pictures' 
					    // 其他配置项
					});
					
					uploader.on("uploadSuccess",function(file,reason ){
						
						if(reason.state==0){
						
							layer.msg("头像上传失败!",{icon: 2});
						}else{
							layer.msg("头像上传成功!",{icon: 1});
							$("#tx").attr("src",reason.url);
						}
						
				    	//alert(reason.url)
				    });
					uploader.on("error",function(type ){
						layer.msg("头像上传出现错误!",{icon: 2});
				    	 
				    });
					
					//设置红点闪烁
					$(".redDot").css({"-webkit-animation":"twinkling 0.7s infinite 0.9s ease-in-out alternate","animation":"twinkling 0.7s infinite 0.9s ease-in-out alternate"});  
					$('.dbtx').on('click', function() {
						
						layer.open({
							type: 2
							,content: '/user/mytodolist'
							,btnAlign: 'c' //按钮居中
							,shadeClose:true
							,title:'预约提醒 '
							,area:['60%','80%']
							,maxWidth:800
						});               
					});
					
					$('.msgboxbtn').on('click', function() {
						$(".redDot").hide();
						$('.layim-tool-msgbox').trigger("click");
					});
					
					
					$('#uinfoPop').on('click', function() {
						layer.open({
							title: '基本信息',
							maxmin: true,
							type: 2,
							content: '/user/userinfo',
							area: ['96%', '97%']
						});
					});
					
					$(".bjlj").on('click',function(){
						layer.open({
							type: 2
							,content: '/linkpage'
							,btnAlign: 'c' //按钮居中
							,shadeClose:true
							,title:'便捷链接 '
							,area:['90%','90%']
							,maxWidth:800
						});
					});
					
					$("#changepwd").on("click",function(){
						
						layer.open({
							title: '修改密码',
							maxmin: true,
							type: 1,
							content: $(".changepwd"),
							area: ['20%', '40%']
						});
						
					});
					
					var comp ="${comp}";//刚注册用户完善信息
					if(comp.length>0){
						layer.open({
							title: '基本信息',
							maxmin: true,
							type: 2,
							content: '/user/userinfo',
							area: ['96%', '97%']
						});
					}
				});
				
				
				$(".pwdchange").on("click",function(){
         			var oldpwd = $.trim($("#oldpwd").val());
		   			var newpwd = $.trim($("#newpwd").val());
		   			
		   			
		   			if (oldpwd == null || oldpwd == "") {
		   				layer.msg("请输入旧密码");
	   					return false;
	   				}
	   				if (newpwd == null || newpwd == "") {
	   					layer.msg("请输入新密码");
	   					return false;
	   				}
		   			$.ajax({
		   				type : "post",
		   				data : {oldpwd : oldpwd,newpwd : newpwd},
		   				url : "/user/updateuserpwd",
		   				dataType : "json",
		   				success : function(data){
		   					
		   					if (data == 0) {
		   						layer.msg("旧密码错误");
		   					} else {
		   						
		   						layer.confirm('密码修改成功，立刻重新登录吗？', {
		   						  btn: ['确定','稍后'] //按钮
		   						}, function(){
		   						 window.location.href = "/";
		   						}, function(){
		   							layer.msg("下次登录时请使用新密码登录",function(){
		   								layer.closeAll();
		   							});
		   						});
		   					}
		   				}
		   			});
		   			
         		});
				
				var lm = null;
				
				layui.use('layim', function(layim){
					   //lm  =layim; 
					  //基础配置
					  layim.config({
					 
					    init: {
					    	url: '/user/getalluser' //接口地址（返回的数据格式见下文）
								  ,type: 'get' //默认get，一般可不填
								  ,data: {} //额外参数 
					    	
					    }, //获取主面板列表信息，下文会做进一步介绍
					    title:"我的IM"
					    ,notice:true
					    //获取群员接口（返回的数据格式见下文）
					    ,members: {
					      url: '' //接口地址（返回的数据格式见下文）
					      ,type: 'get' //默认get，一般可不填
					      ,data: {} //额外参数
					    }
					    
					    //上传图片接口（返回的数据格式见下文）
					    ,uploadImage: {
					      url: '/user/imgupload' //接口地址
					      ,type: 'post' //默认post
					    } 
					    
					    //上传文件接口（返回的数据格式见下文）
					    ,uploadFile: {
					      url: '/user/fileupload' //接口地址
					      ,type: 'post' //默认post
					    } ,
					    brief:false,
						min:true,
						isgroup:false,
						voice:false,
						copyright:true
					   ,msgbox: '/user/message' //消息盒子页面地址，若不开启，剔除该项即可
					    //,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
					    ,chatLog: '/user/historymessage' //聊天记录页面地址，若不开启，剔除该项即可
					  });
					  
					  layim.on('ready', function(res){
						  lm = layui.layim; 
						  getMesCount(); 
					   });
					  //监听发送消息
					  layim.on('sendMessage', function(data){
					     var To = data.to; 
					     send(data); 
					  });
					   
					  layim.on('online', function(status){
						  //console.log(status); //获得online或者hide
						  var stateVal = "";
						  if(status=="hide"){
							  stateVal ="hide";
						  }
						  $.get("/user/onlinestate",{ state: stateVal });
					   }); 
					  
					});    
				
				   //falsh加载完成 连接消息系统
		            function flashBridgeCreated(){
						  
		            	  document.getElementById("CIMBridge").connect(CIM_HOST,CIM_PORT);
		            }  
					 
				   /**  当socket连接成功回调 **/
				   function sessionCreated()
				   {
				      //使用session id作为唯一标示，区分同一设备的多个用户
				      document.getElementById("CIMBridge").bindAccount(ACCOUNT,"<%=session.getId()%>");
				      document.getElementById("CIMBridge").getOfflineMessage(ACCOUNT);
				      
				   }

				   /**  当socket断开时回调，通知用，并不需要做其他操作   **/
				   function sessionClosed()
				   {
				         //这里可以进行页面上的操作
				   }
				   
				    /**  当socket连接服务器失败时回调，通知用，并不需要做其他操作   **/
				   function sessionFailed()
				   {
				        //这里可以进行页面上的操作
				   }
				   
				   
				   /** 当收到请求回复时候回调  **/
				   function onReplyReceived(data)
				   {
				     /* var json = JSON.parse(data)
				     if(json.key=='client_bind' && json.code==200)
				     {
				        $("#LoginDialog").hide();
				        $("#MessageDialog").fadeIn();
				        $("#current_account").text("当前账号:"+ACCOUNT);
				        
				     } */
				   }
				   
				   /** 当收到消息时候回调  **/
				   function onMessageReceived(data)
				   { 
					 data =data.replace(/\r?\n/g,  '<br>');
					  // lm.msgbox(7);
					   var message = JSON.parse(data);
					 
					    
					     if(message.type=='1')
					     {
					    	 
					         document.getElementById("CIMBridge").playSound("/im/dingdong.mp3");
					    
					         var user =  message.sender.split("|");
					        var content =  message.content.replace(new RegExp(/(<br>)/g),'\n') ;
					         lm.getMessage({
					 	        username: user[1]
					 	        ,avatar: message.file+"?"+new Date().getTime()
					 	        ,id: user[0]
					 	        ,type: "friend"
					 	        ,content: content
					 	        ,timestamp: new Date().getTime()
					 	      });     
					       
					         
					     }else   if(message.type=='2'){
					    	  // lm.msgbox(8);
					    	   document.getElementById("CIMBridge").playSound("/im/dingdong.mp3");
					    	   var content =  message.content.replace(new RegExp(/(<br>)/g),'\n') ;
					    	   content ="系统消息:"+content;
					    	   lm.getMessage({
						        	  username: "${robot}",
						        	  avatar: message.file
						        	  ,id: 1 //聊天窗口ID
						        	  ,type: "friend" //聊天窗口类型
						        	  ,content:content
						        	});
					    	 
					     }else   if(message.type=='888'){//上线消息 
					    	 lm.setFriendStatus(message.content, 'online');
					     }else   if(message.type=='777'){ //离线消息
					    	 
					    	 lm.setFriendStatus(message.content, 'offline');
					     }else   if(message.type=='999'){ //强制下线
					    	 
					    	 layer.msg("您的帐号在其它地方登录，您已被迫下线，如果不是您本人操作，请及时修改密码",{icon:3},function(){
	   								window.location.href="/logout";
	   						 });
					     }
				        
				   }
				  
				    function send(data)
					{
				    	
				    	var dt = data;
				    	var To = data.to;
				    	var my = data.mine;
					    if($.trim(ACCOUNT)=='' )
					    {
					       return;
					    }
					    var message = my.content;
					    var recount =To.id;// $('#receiver').val();
					    if($.trim(message)=='')
					    {
					       return;
					    }  
					    $.post("/send", {content:message,type:1,receiver:recount},
								   function(data){
								    //发送成功
					    }); 
					 }
				    
				    //取得最新消息条数
					  function getMesCount(){
						  var count = 0;
						  $.ajax({
							  type : "get",
							  url : "/user/messagecount",
							  async : false,
							  success : function(data){ 
								  
								  count = data;
							      if(count>0){
							    	  if(lm!=null){
							    		  $(".redDot").show();
							    		  lm.msgbox(count); //模拟消息盒子有新消息，实际使用时，一般是动态获得 
							    	  }
								   } 
							  }
						  });  
						 // setTimeout('getMesCount()', 20000);
						 
					  } 
					  
					  document.oncontextmenu=new Function("event.returnValue=false;"); 	  
					  
			
					  
					 
			</script>
			
			
		</div>
	</body>

</html>